html{
	height: 100%;
}
body{
	background-color: #FFE8D4;
	height: 100%;
}
.moon{
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: #e5a4cb;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}
@-webkit-keyframes orbit{
	from{
		-webkit-transform: rotateX(0) rotateY(359deg);
	}
	to{
		-webkit-transform: rotateX(359deg) rotateY(-359deg);
	}
}
@keyframes orbit{
	from{
		-webkit-transform: rotateX(0) rotateY(359deg);
		transform: rotateX(0) rotateY(359deg);
	}
	to{
		-webkit-transform: rotateX(359deg) rotateY(-359deg);
		transform: rotateX(359deg) rotateY(-359deg);
	}
}
.moon:before, .moon:after{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	-webkit-transform-origin: center center -133.33333px;
	transform-origin: center center -133.33333px;
	-webkit-animation: orbit 3s linear infinite;
	animation: orbit 3s linear infinite;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	z-index: 1;
	content: '';
	width: 40px;
	height: 40px;
	background-color: #bbb;
	border-radius: 50px;
}
.moon:before{
	-webkit-transform-origin: center center -100px;
	transform-origin: center center -100px;
	width: 30px;
	height: 30px;
	background-color: #555;
	opacity: 0.5;
}
.moon.behind:after{
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}